<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录异常日志</title>
  <link rel="stylesheet" href="../../mobile_static/css/element.css">
  <link rel="stylesheet" href="../../mobile_static/css/base.css">
  <link rel="stylesheet" href="../../mobile_static/css/clientexceptionLog.css">
  <script src="../../mobile_static/js/vue.js"></script>
  <script src="../../mobile_static/js/axios.js"></script>
</head>

<body>
  <div id="app">
    <div class="app-content">
      <div class="top-bar">

      </div>

      <!-- 表格 -->
      <div class="table-box">
        <!-- 过滤条件 -->
        <div class="table-title">
          <ul>
            <li>
              <el-date-picker value-format="yyyy-MM-dd" v-model="timeValue" @change="dateChange" type="daterange"
                unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </li> 
            <li>
              <el-input prefix-icon="el-icon-search" v-model="searchValue" placeholder="按用户账号搜索" @change="search">
              </el-input>
            </li>
            <li>
              <el-input prefix-icon="el-icon-search" v-model="searchValue2" placeholder="按用户姓名搜索" @change="search">
              </el-input>
            </li>
            <li>
              <el-select v-model="value" placeholder="客户端类型" @change="search">
                <el-option v-for="item in options" :key="item.type" :label="item.name"
                  :value="item.type">
                </el-option>
              </el-select>
            </li>
            <li>
              <el-select v-model="value2" placeholder="客户端版本" @change="search">
                <el-option v-for="item in options2" :key="item.type" :label="item.name"
                  :value="item.type">
                </el-option>
              </el-select>
            </li>
            <li>
              <el-select v-model="value2" placeholder="登录状态" @change="search">
                <el-option v-for="item in options3" :key="item.type" :label="item.name" :value="item.type">
                </el-option>
              </el-select>
            </li>
            <li>
              <el-button type="primary">查询</el-button>
            </li>
            <li>
              <el-button >重置</el-button>
            </li>
          </ul>
        </div>
        <!-- 表格主体 -->
        <div class="table-main">
          <el-table :data="tableData" border :header-cell-class-name="headerBg"  stripe style="width: 100%" v-loading="loading">
            <el-table-column label="序号"type="index" width="50">
            </el-table-column>
            <el-table-column label="用户账号" prop="UserId">
            </el-table-column>
            <el-table-column label="用户姓名" prop="UserName">
            </el-table-column>
            <el-table-column label="部门" prop="DepFullPath">
            </el-table-column>
            <el-table-column label="客户端类型" prop="SoftwareType">
            </el-table-column>
            <el-table-column label="客户端版本" prop="SoftwareVersion">
            </el-table-column>
            <el-table-column label="日期时间" prop="LogOccurrenceTime">
            </el-table-column>
            <el-table-column label="日志详情" prop="operation" >
             
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="paging-box">
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="thisPage" :page-sizes="[10, 20, 50, 100]" :page-size="size"
              layout="total, sizes, prev, pager, next, jumper" :total="length">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
<script src="../../mobile_static/js/element.js"></script>
<script type="module">

  new Vue({
    el: "#app",
    data() {
      return {
        loading: false,
        timeValue: "",//日期value值
        startDate: "",
        endDate: "",
        options: [
          {type:"4",name:'iPhone'},
          {type:"3",name:'iPad'},
          {type:"2",name:'Android'},
          {type:"1",name:'AndroidPad'},
        ],
        options2: [
          {type:"3",name:'1.4.7'},
          {type:"2",name:'1.4.8'},
          {type:"1",name:'1.4.9'},
        ],
        options3: [
          {type:"2",name:'失败'},
          {type:"1",name:'成功'},
        ],
        value: '',//选择器value值
        value2: '',//选择器value值
        searchValue: "",
        searchValue2: "",
        tableData: [{  UserId:"2",
            UserName:"3",
            DepFullPath:"4",
            SoftwareType:"5",
            SoftwareVersion:"6",
            LogOccurrenceTime:"7"}],
        size: 10,
        thisPage: 1,
        length: 500,
      }
    },
    created() {
      for (let i = 0; i < this.tableData.length; i++) {
              this.$set(this.tableData[i], "operation", "查看详情")
            }
            if (this.tableData.length) {
              let tableBtnArr = document.getElementsByClassName("el-table_1_column_8");
              setTimeout(() => {
                for (let i = 1; i < tableBtnArr.length; i++) {
                  tableBtnArr[i].addEventListener("click", () => {
                    window.location.href = './loginLogDetails.html';
                  })
                }
              })
            }
    },
    mounted()    {

    },
    watch: {

    },
    methods: {
      headerBg() {
      return 'headerBg'
    },
      search() {
        this.thisPage = 1
        this.RequestedVisitsPV()
      },
      backHome() {
        window.history.back()
      },
      //页面最大数据尺寸改变调用
      handleSizeChange(val) {
        this.size = val
        this.RequestedVisitsPV()
      },
      //页数改变调用
      handleCurrentChange(val) {
        this.thisPage = val
        this.RequestedVisitsPV()
      },
      //日期选择框
      dateChange() {

      },
      // 请求访问量PV
      RequestedVisitsPV() {

      },
      //下载
      download() {

      },
      //补零函数
      ZeroComplement(num) {
        if (num < 10) {
          return "0" + num;
        } else {
          return num;
        }
      }
    }
  })
</script>
<style>
  .headerBg{
    background: linear-gradient(180deg, #FAFAFA 0%, #F1F1F1 100%);
        background-size: 100% 100%;
        /* background-repeat: no-repeat !important; */
      }
      .el-table_1_column_8 {
     cursor: pointer;
     color: #4583D6;
   }
</style>